<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const order_list = ref([])

onLoad((options) => {
    const { orderList } = options
    order_list.value = JSON.parse(orderList)
    // console.log(order_list.value);
})

const coupon = ref(15)
const total_price = computed(() => {
    let total = 0;
    order_list.value.forEach(item => {
        total += item.price * item.selected_num;
    });
    return total;
})

const last_price = computed(() => {
    return total_price.value - coupon.value;
})

const toOrder = () => {
    uni.switchTab({
        url: '/pages/food/food',
    })
}
</script>
<template>
    <view class="confirmOrder-container">

        <view class="[info-container,box-container]">
            <view class="title">远山见</view>
            <view class="address">长兴县泗安镇东道口村太湖梅花博览园内</view>
            <up-line color="#979797"></up-line>
            <view class="getfood-time">
                <view class="title">取餐时间</view>
                <view class="status">立即取餐</view>
            </view>
            <up-line color="#979797"></up-line>
        </view>
        <view class="[order-detail-box,box-container]">
            <view class="title">订单详情</view>
            <view class="order-container" v-for="item in order_list" :key="item.goodsid">
                <view class="left">
                    <view class="image-box">
                        <image class="image" :src="item.cover" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
                            binderror="" bindload="">

                        </image>
                    </view>
                    <view class="info-box">
                        <view class="title">{{ item.title }}</view>
                        <view class="num">{{ item.selected_num }}份</view>
                    </view>
                </view>
                <view class="price-box">
                    <view class="symbol">￥</view>
                    <view class="price">{{ item.price.toFixed(2) }}</view>
                </view>
            </view>

        </view>

        <view class="[price-detail-box,box-container]">
            <view class="title">价格明细</view>
            <view class="total-price-box">
                <view class="price-title">商品总价</view>
                <view class="price-box">
                    <view class="symbol">￥</view>
                    <view class="price">{{ total_price }}</view>
                </view>
            </view>
            <view class="sub-price-box">
                <view class="price-title">共减</view>
                <view class="price-box" style="color: red;">
                    <view class="symbol">-￥</view>
                    <view class="price">{{ coupon }}</view>
                </view>
            </view>
            <view class="coupon-box">
                <view class="price-title" style="margin-left: 20px;">优惠券</view>
                <view class="price-title">暂无可用></view>
            </view>
            <up-line color="#979797"></up-line>
            <view class="total-box" style="margin-top: 15px;">
                <view class="price-title" style="color: black;">合计</view>
                <view class="price-box">
                    <view class="symbol">￥</view>
                    <view class="price">{{ last_price }}</view>
                </view>
            </view>
        </view>
        <view style="height: 100px;"></view>
        <view class="footer-container">
            <view class="continue" @click="toOrder">继续点餐</view>
            <view class="confirm-box">
                <view>确认支付，</view>
                <view class="price-box">
                    <view class="symbol">￥</view>
                    <view class="price">{{ last_price }}</view>
                </view>
            </view>
        </view>

    </view>
</template>



<style lang="scss" scoped>
.confirmOrder-container {
    width: 100%;
    height: 100vh;
    background-color: #f6f7f8 !important;
    overflow-y: scroll;

    //每个box的装饰
    .box-container {
        width: 90%;
        background-color: white;
        border-radius: 32rpx;
        margin: 20rpx auto;
        padding: 20rpx;
    }

    .price-box {
        display: flex;
        align-items: baseline;

        .symbol {
            font-weight: 600;
            font-size: 24rpx;
        }

        .price {
            font-size: 32rpx;
            font-weight: 600;
        }

    }

    .info-container {
        .title {
            font-size: 36rpx;
            font-weight: 600;
        }

        .address {
            color: #979797;
            font-size: 28rpx;
            padding: 30rpx 0;
        }

        .getfood-time {
            display: flex;
            justify-content: space-between;
            padding: 30rpx 0;

            .title {
                font-size: 28rpx;
                font-weight: 600;
            }

            .status {
                color: #37a850;
                font-size: 28rpx;
                font-weight: 600;
            }
        }
    }

    .order-detail-box {
        display: flex;
        flex-direction: column;

        .title {
            font-size: 28rpx;
            font-weight: 600;
            padding: 20rpx 0;
        }

        .order-container {
            display: flex;
            justify-content: space-between;
            align-items: end;
            margin: 10rpx 0;

            .left {
                display: flex;

                .image-box {
                    width: 120rpx;
                    height: 120rpx;
                    aspect-ratio: 1;


                    .image {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        border-radius: 16rpx;
                    }

                }

                .info-box {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin-left: 20rpx;

                    .title {
                        padding-top: 0;
                    }

                    .num {
                        color: #979797;
                        font-size: 24rpx;
                    }
                }
            }


        }
    }

    .price-detail-box {
        .title {
            font-size: 14px;
            font-weight: 600;
            padding: 10px 0;
        }

        .total-price-box,
        .sub-price-box,
        .coupon-box,
        .total-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;

            .price-title {
                font-size: 14px;
                color: #7f7f7f;

            }
        }


    }

    .footer-container {
        display: flex;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: white;
        padding: 20px 0;

        .continue {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #c07f58;
            font-size: 14px;
            font-weight: 600;
            border: 2px solid #c07f58;
            padding: 10px 20px;
            border-radius: 32px;
        }

        .confirm-box {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: 600;
            background-color: #c07f58;
            padding: 0 20px;
            border-radius: 32px;
        }
    }

}
</style>